<template>
  <div class="box">
      <mt-header :title="datar.title">
        <div slot="left">
          <mt-button @click = "tobefore" icon="back"></mt-button>
        </div>
      </mt-header>
    <div class="detailContent">
      <div class="tag">
        <dl>
          <dt>
            <img :src="decodeURIComponent(datar.cover).substring(7)">
          </dt>
          <dd>
            <span>{{ datar.title }}</span>
            <p><a href="#">{{ datar.author }} </a><a href="#">{{ datar.cat }}</a></p>
            <p><a href="#">{{ datar.wordCount }}万字</a></p>
          </dd>
        </dl>
        <div class="zongheP">
          <p><em>{{ datar.rating.score }}</em><em>{{ datar.rating.count }}人评分</em></p>
          <p><em>{{ datar.retentionRatio }}%</em><em>读者留存</em></p>
          <p><em>{{ datar.latelyFollower }}万</em><em>追书人气</em></p>
        </div>
      </div>
      <div class="express">
        <h4>简介</h4>
        <p>{{ datar.longIntro }}</p>
        <div @click = "gocatalog(datar)" class="catalog">
          <span class="iconfont icon-mulu">目录</span>
          <div><i>{{ datar.lastChapter }}</i></div>
        </div>
      </div>
      <div class="authorOtherBooks">
        <h4>作者的其它作品</h4>
        <dl @click = "goDetail(item)" v-for = "item of authorOtherB" :key = "item._id">
          <dt><img :src="decodeURIComponent(item.cover).substring(7)"> </dt>
          <dd>{{ item.title }}</dd>
        </dl>
      </div>
      <div class="otherSee">
        <h4>看过这本书的人还在看</h4>
        <dl @click = "goDetail(item)" v-for = "item of otherSee" :key = "item._id">
          <dt><img :src="decodeURIComponent(item.cover).substring(7)"> </dt>
          <dd>{{ item.title }}</dd>
        </dl>
      </div>
    </div>
    <footer class="footer footerDetail">
      <mt-button @click = "gobookself" class = "iconfont icon-hao" size="normal">加入书架</mt-button>
      <mt-button @click = "tocontent(datar)" size="normal">开始阅读</mt-button>
    </footer>
  </div>
</template>
<script>
import Vue from 'vue'
import { Button, Header, Indicator } from 'mint-ui'
Vue.use(Button, Header, Indicator)
export default{
  data () {
    return {
      datar: {},
      authorOtherB: [],
      otherSee: []
    }
  },
  mounted () {
    /* eslint-disable no-new */
    new Promise((resolve, reject) => {
      Indicator.open('加载中...')
      fetch(`/xiaoliang/book-info/${this.$route.query.id}`)
        .then(res => res.json())
        .then((data) => {
          console.log(data)
          console.log(data.rating.score)
          data.wordCount = parseInt(data.wordCount / 10000)
          data.latelyFollower = parseFloat(data.latelyFollower / 10000).toFixed(1)
          this.datar = data
          console.log(this.datar.rating.score)
          resolve(this.datar)
        })
    }).then((data) => {
      console.log(data)
      fetch(`/xiaoliang/author-books?author=${data.author}`)
        .then(res => res.json())
        .then((data) => {
          this.authorOtherB = data.books
          console.log(this.authorOtherB)
          Indicator.close()
        })
    })
    fetch(`/xiaoliang/recommend/${this.$route.query.id}`)
      .then(res => res.json())
      .then((data) => {
        console.log(data)
        this.otherSee = data.books
      })
  },
  methods: {
    gocatalog (item) {
      console.log(1111)
      console.log(item)
      /* eslint-disable no-new */
      new Promise((resolve, reject) => {
        fetch(`/xiaoliang/book-sources?view=summary&book=${item._id}`)
          .then(res => res.json())
          .then((data) => {
            console.log(data)
            this.$router.push({path: `/catalog?id=${data[0]._id}`})
            resolve()
          })
      })
    },
    tocontent (item) {
      new Promise((resolve, reject) => {
        fetch(`/xiaoliang/book-sources?view=summary&book=${item._id}`)
          .then(res => res.json())
          .then((data) => {
            console.log(data[0]._id)
            resolve(data[0]._id)
          })
      }).then((data) => {
        console.log('1111', data)
        fetch(`/xiaoliang/book-chapters/${data}`)
          .then(res => res.json())
          .then((data) => {
            console.log(data.chapters[0])
            this.$router.push(`/content?link=${data.chapters[0].link}&index=0`)
          })
      })
    },
    goDetail (item) {
      this.$router.push({path: `/detail?id=${item._id}`})
      location.reload()
    },
    gobookself () {
      return new Promise((resolve, reject) => {
        console.log(this.$route.query.id)
        console.log(this.$store)
        this.$store.dispatch('getIdfuc', this.$route.query.id)
      }).then(() => {
        this.$router.push('/')
      })
    },
    tobefore () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.detailContent{
  @include overflow()
  .tag{
    @include rect(100%, 2.5rem);
    margin-top:0.1rem;
    dl{
      @include rect(100%, 1.5rem);
      @include flexbox();
      @include justify-content(flex-start);
      margin-left:0.1rem;
      dt{
        @include rect(1rem, auto);
        img{
          @include rect(1rem, auto);
          }
        }
      dd{
        @include rect(2rem, auto);
        margin:0 0 0 0.05rem;
        span{
          @include font-size(0.20rem)
        }
        p:nth-of-type(1){
          a:nth-of-type(1){
            @include text-color(#f00)
          }
          a:nth-of-type(2){
            @include text-color(#8b8a8f)
          }
        }
        p:nth-of-type(2){
          a{
            @include text-color(#8b8a8f)
          }
        }
      }
    }
    .zongheP{
      @include rect(100%, 1rem);
      @include flexbox();
      @include justify-content(space-around);
      p{
        @include flexbox();
        @include flex-direction(column);
        @include justify-content();
        @include align-items();
        @include text-color(#8b8a8f)
        em:nth-of-type(1){
          font-size:0.24rem;
        }
        em:nth-of-type(2){
          font-size: 0.12rem;
        }
      }
    }

  }
  .express{
    @include rect(100%,auto);
    padding:0 0.1rem;
    h4{
      @include rect(100%,0.2rem)
    }
    p{
      @include rect(100%,auto)
    }
    .catalog{
      @include rect(100%,0.4rem)
      @include flexbox();
      @include justify-content(space-between);
      @include align-items();
      @include border(0.01rem 0 0.01rem 0, #ccc, solid);
      margin-top:0.1rem;
      div{
        width: 2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .authorOtherBooks,.otherSee{
    @include rect(100%,auto)
    @include flexbox();
    @include justify-content(flex-start);
    flex-wrap: wrap;
    @include align-items(space-around);
    h4{
      @include rect(100%,100%);
      height:0.5rem;
      line-height: 0.5rem;
      font-weight:100;
      font-size: 0.16rem;
      margin-left:0.06rem;
    }

    dl{
      @include rect(0.8rem, auto);
      @include flexbox();
      @include flex-direction(column);
      margin: 0 0.06rem;
      dt{
        @include rect(0.8rem, auto)
        img{
          @include rect(0.8rem, auto)
        }
      }
      dd{
        @include rect(0.8rem, 0.3rem)
        line-height: 0.3rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }
    }
  }
}
.footerDetail{
  @include rect(100%, 0.5rem);
  @include background-color(#fee7ed);
  button:nth-of-type(1){
    @include rect(49%, 0.5rem);
    border: none;
    background:#fff;
    color: #f36a86;
  }
  button:nth-of-type(2){
    @include rect(49.5%, 0.5rem);
    border: none;
    background:#f36a86;
    color:#fff;
  }
}
</style>
